<script setup lang="ts">
import type { UserMessage } from "@/types/userTypes.d.ts";

withDefaults(defineProps<{
    userMessage: UserMessage
}>(), {
    userMessage: () => (<UserMessage>{}),
});

</script>

<template>
    <div class="top">
        <van-image round fit="cover" :src="userMessage.avatar" />
        <div class="name">
            <p>{{ userMessage.account }}</p>
            <p>
                <van-icon name="edit" />
                <span>我的手机号:{{userMessage.mobile}}</span>
            </p>
        </div>
    </div>
</template>

<style scoped lang="scss">
.top {
    display: flex;
    padding-top: 30px;
    align-items: center;

    .van-image {
        width: 70px;
        height: 70px;
    }

    .name {
        padding-left: 10px;

        p {
            &:first-child {
                font-size: 18px;
                font-weight: 500;
                color: var(--cp-primary);
            }

            &:last-child {
                margin-top: 10px;
                font-size: 12px;
                color: #afafaf;
            }
        }

    }
}
</style>
